<template>
  <view class="content">
    <view class="top_Color"></view>
    <view class="status_bar"></view>
    <!-- 第一张卡片 -->
    <view class="card_one" :style="`margin-top:${mt}px`">
      <img src="../../static/Im.jpg" alt class="img_sty" />
      <!-- <image src="../../static/Im.jpg" mode="widthFix" class="img_sty" ></image> -->
    </view>
    <!-- 第二张卡片 -->
    <view class="card_two">
      <view class="card-item" @click="evaluationClick">
        <view class="icon-container">
          <img src="../../static/cp.png" alt class="img_sty" />
          <!-- <image src="测评图标路径" mode="widthFix"></image> -->
        </view>
        <view class="text-container">
          <text class="big_text">测评</text>
          <text class="sub-text">癌症风险因素</text>
        </view>
      </view>
      <view class="card-item">
        <view class="icon-container">
          <img src="../../static/yy.png" alt class="img_sty" />
          <!-- <image src="预约图标路径" mode="widthFix"></image> -->
        </view>
        <view class="text-container">
          <text class="big_text">预约</text>
          <text class="sub-text">癌症自助筛查</text>
        </view>
      </view>
    </view>
    <!-- 第三张卡片  -->
    <view class="three_card">
      <view class="card-item">
        <view class="icon-text-container">
          <img src="../../static/jk.png" alt class="only_img" />
          <!-- <image class="icon" src="健康管理图标路径" mode="widthFix"></image> -->
          <text class="title">健康管理</text>
        </view>
        <view class="arrow-container">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <u-line></u-line>
      <view class="card-item">
        <view class="icon-text-container">
          <img src="../../static/zd.png" alt class="only_img" />
          <!-- <image class="icon" src="早诊早治图标路径" mode="widthFix"></image> -->
          <text class="title">早诊早治</text>
        </view>
        <view class="arrow-container">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <!-- 一键登录 -->
    <u-popup :show="loginShow" :round="10" mode="bottom" @close="close" @open="open">
      <view class="login_view">
        <view>
          <img src="" alt="">
          <text>xxx有限公司</text>
        </view>
        <view>我们将申请获得您的授权</view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import {
  onLoad
} from '@dcloudio/uni-app'
import {
  ref
} from 'vue'
let mt = ref(0)  //距离顶部距离
let loginShow = ref(false)  //登录底部弹窗
onLoad(() => {
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  mt.value = menuButtonInfo.height + 50
})
const evaluationClick = () => {  //测评点击
  console.log('asdasdsa');
  // 点击测评判断是否登录-（已登录：判断是否填写信息，已填写：打开测评试卷）
  // 未登录-拉起微信登录授权 -> 未填写-填写基本信息 -> 打开测评试卷
  // 已登录 -> 未填写-填写基本信息 -> 打开测评试卷
  // 已登录 -> 已填写 -> 打开测评试卷.
  wx.getSetting({
    success(res) {
      console.log("🚀 ~ success ~ res:", res)
      if (!res.authSetting['scope.userInfo']) {
        wx.authorize({
          scope: 'scope.userInfo',
          success() {
            // 用户已经同意小程序使用获取用户功能，调用获取用户信息登录
          }
        })
      } else {
        loginShow.value = true
      }
    }
  })
  console.log('asdasdsa111');
}

const clickLogin = () => {
  wx.getUserProfile({
    desc: '用于完善用户资料',
    success: function (res) {
      console.log("🚀 ~ success ~ res:", res)
      wx.login({
        success: (res) => {
          if (res.code) {
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        },
        fail: (err) => {
          console.log("🚀 ~ evaluationClick ~ err:", err)
        },
        complete: (all) => {
          console.log("🚀 ~ success ~ all:", all)
        }
      })
    }
  })
}
</script>

<style>
page {
  background: linear-gradient(to bottom, #f4f7fa 50%, #f1f5f9 50%);
}
</style>

<style lang="scss" scoped>
.content {
  padding: 0 32rpx 50rpx;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.top_Color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 350rpx;
  background: linear-gradient(to bottom right, #509ce7, #007bff);
  border-bottom-left-radius: 50%;
  /* 实现左下角圆形 */
  border-bottom-right-radius: 50%;
  /* 实现右下角圆形 */
  z-index: -1;
}
.img_sty {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}
.card_one {
  height: 360rpx;
  border-radius: 12rpx;
}
.card_two {
  margin-top: 28rpx;
  height: 340rpx;
  display: flex;
  justify-content: space-between;
  .card-item {
    width: 48%; /* 每个卡片占大约45%宽度，可微调 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* 卡片背景色 */
    border-radius: 10px; /* 卡片圆角 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
    margin-bottom: 20px; /* 卡片底部间距 */
  }
  .icon-container {
    width: 100rpx;
    height: 96rpx;
  }
  .text-container {
    display: flex;
    flex-direction: column; /* 文字垂直排列 */
    align-items: center;
  }
  .big_text {
    font-size: 40rpx;
    font-weight: 550;
    margin: 14rpx 0;
    color: #323f55;
  }
  .sub-text {
    font-size: 12px; /* 子文本字体大小 */
    color: #666; /* 子文本颜色 */
  }
}
.three_card {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  padding: 0 32rpx;
  .card-item {
    height: 170rpx;
    // padding: 0 24rpx 0 44rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .icon-text-container {
    display: flex;
    align-items: center;
    .only_img {
      width: 80rpx;
      height: 80rpx;
    }
    .title {
      margin-left: 56rpx;
      color: #525252;
    }
  }
}
.login_view {
  height: 350rpx;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}
</style>
